<template>
	<!-- v-if="storyId == curStoryId" -->
	<view class="m-pk" @click.stop="handlePkClick">
		<view class="top-user-info" :style="{top:top+'rpx'}">
			<view class="pk-center">
				<view class="left-myGirl">
					<view class="top-avatar">
						<view class="avatar-content">
							<image v-if="myData.image" class="avatar-img" :src="myData.image" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="bottom-name">
						{{myData.name}}
					</view>
				</view>
				<view class="center-blood">
					<!-- 即将开始 -->
					<view class="top-tip">
						<text v-if="!isStart">即将开始</text>
						<u-count-down v-if="isStart&&!isEnd" ref="mcountDown"
							style="text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3) !important;font-weight: 400"
							@change="handleTimeChange" @end="handleCountDownEnd" :timestamp="timestamp"
							separator-size="24" bg-color="transparent" :show-hours="false" separator-color="#fff"
							font-size="24" color="#fff"></u-count-down>

						<text v-if="isEnd">已结束</text>

					</view>
					<view class="blood-content">
						<view class="blood-left" :class="{'active-left':leftPercent>50}"
							:style="{width:(!leftPercent||leftPercent==0)?'10%':leftPercent+'%'}">
							<text v-if="isStart">{{leftPoint}}</text>
							<text v-else>0</text>
							<view class="forward">
								<view class="forwar-content"></view>
							</view>
						</view>
						<view class="blood-right" :class="{'active-right':leftPercent<50}">
							<text v-if="isStart">{{rightPoint}}</text>
							<text v-else>0</text>
							<view class="forward">
								<view class="forwar-content"></view>
							</view>
						</view>
					</view>

				</view>
				<view class="right-thatGirl">
					<view class="top-avatar">
						<view class="avatar-content">
							<image v-if="enemyData.image" class="avatar-img" :src="enemyData.image" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="bottom-name">
						<text>{{enemyData.name}}</text>
					</view>
				</view>

			</view>

		</view>





		<!-- 	<video src="https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20240926/VID7023d139/VID7023d139.mp4"
			class="pkVideo" object-fit="cover" autoplay="true" :controls="false" :loop="true"
			@timeupdate="handleTimeUpdate"></video> -->





		<pkClickEffect ref="pkClickEffect" @flyNowIcon="flyNowIcon"></pkClickEffect>
		<giftFloat ref="giftFloat" :top="giftFlyTop" />
		<scrollPinlun ref="mScrollPinlun" :height="pinlunHeigh" :bottom="pinlunBottom" :listData="pinlunListData">
		</scrollPinlun>
		<!-- 
		<resultModal ref="resultModal" @pauseVideo="pauseVideo" @reStartPK="reStartPK" @continuePk="continuePk"
			@jumpBack="jumpBack"></resultModal> -->
		<view class="bottom-control-box" @click.stop>
			<view class="input-box" @touchend.prevent>
				<view class="input-control">说点什么...</view>
			</view>
			<view class="button-list">
				<view class="btn-item flex-row-center-center" @click="handleBottomBtnClick(item,index)"
					:class="{'btn-item-more':item.type=='moreGifts'}" v-for="(item,index) in bottomBtnList"
					:key="index">
					<image class="item-img" :src="item.image" mode="aspectFill"></image>
				</view>
			</view>

		</view>
		<mGiftPop ref="mGiftPop"></mGiftPop>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";
	import pkClickEffect from '@/components/m-pk-click-effect/index.vue'
	import giftFloat from '@/components/m-pk/gift-float.vue'
	import resultModal from './result-modal.vue'
	import scrollPinlun from '@/components/scroll-pinlun/index.vue'
	import mGiftPop from '@/components/m-gift-pop/index.vue'
	import {
		handleReturnRarityLevelUrl,
		getStartList
	} from "@/utils/tools.js"
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: ""
			},
			nextStoryId: {
				type: String,
				default: ""
			},
			preStoryId: {
				type: String,
				default: ""
			},

		},
		components: {
			pkClickEffect,
			giftFloat,
			resultModal,
			scrollPinlun,
			mGiftPop
		},
		data() {
			return {
				myData: {
					image: "",
					name: "",
				},
				enemyData: {
					image: "",
					name: "",
				},
				bottomBtnList: [{
						name: "玫瑰花",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f3427f3b8a154dd7bcf50352ec8360f0.png",
						type: 'one',
						id: "40",
						cardPoint: 66
					},
					{
						name: "提拉米苏",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c4f83fe10f246ed80b80b147ed2f295.png",
						type: 'tow',
						id: "41",
						cardPoint: 10
					},
					{
						name: "小心心",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/05a6d359a31b4096a91966fddfe50071.png",
						type: 'three',
						id: "40",
						cardPoint: 1
					},
					{
						name: "更多礼物",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/252bcc13974a4b6a8375f78690fe2d35.png",
						type: 'moreGifts'
					},
				],
				cardPlayVoice: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/audio/3c0df57b2d6f4dbda0afae45cdb73a90.MP3",
				cardChooseVoice: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/audio/34b6e69f2b134a95b4bbd285053e95c2.MP3",
				audioContext: null,
				showAttr: false,
				playCardEffectIndex: -1,

				isLongPress: false,
				activeLongPressIndex: -1,
				activeCardIndex: -1,
				tipText: "对方回合时不能出牌",
				tipTimeId: null,
				showTip: false,
				isSelf: false,
				// 卡牌相关数据
				totalPower: 3,
				nowPower: 3,

				isMyFlag: false,
				isEnemyFlag: false,
				isMyScale: false,
				isEnemyScale: false,
				nowEnemyGirlData: {},
				nowMyGirlData: {},
				// 
				isMyRound: true,
				activeRoundIndex: 0,
				nowRoundData: {},
				roundDataList: [],
				myPerSonList: [],
				enemyPersonList: [],


				myPersonWaitList: [],
				enemyPersonWaitList: [],
				waitStartTime: 0,
				// isStart: false,
				isStart: true,
				autoAddIntervalId: null,
				isEnd: false,
				timestamp: 60,
				top: 168,
				leftPoint: 0,
				rightPoint: 0,
				baseClickPoint: 1,
				svgStyle: "width:110vw;height:110vh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)",
				// 评论组件参数
				pinlunHeigh: 500,
				pinlunBottom: 160,
				pinlunListData: [],
				// 配置未加
				// 技能卡组件
				skillBottom: 20,

				// 飞翔的礼物
				giftFlyTop: 920,
				isInit: false

			}
		},
		computed: {
			...mapState(["curStoryId"]),
			leftPercent() {
				if (this.isStart) {
					let total = this.leftPoint + this.rightPoint
					let percent = ((this.leftPoint / total) * 100).toFixed(2)
					return percent <= 10 ? 10 : percent
				} else {
					return 50
				}

			},
			enemyTopUsePersonData() {
				let arr = this.enemyPersonWaitList.slice().reverse();
				return arr
			}

		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (this.storyId == this.curStoryId) {
						this.getProps()
						this.handleGetData()
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {
			this.initAudio()
			// 测试用的
			// this.getProps()
			// this.handleGetData()
			// this.handleThatGirlAutoAdd()
			this.startPk()
		},
		created() {},

		methods: {
			handleReturnRarityLevelUrl,
			getStartList,
			handleBottomBtnClick(item, index) {
				console.log("底部按钮点击", item)
				if (item.type == 'moreGifts') {
					if (this.$refs.mGiftPop) {
						this.$refs.mGiftPop.open()
					}
				}
			},
			handleJumpNow() {
				if (this.$refs.resultModal) {
					this.$refs.resultModal.open('success')
				}
			},
			jumpBack() {
				if (this.preStoryId) {

					this.$emit("getGameResult", this.preStoryId)
					if (this.$refs.resultModal) {
						this.$refs.resultModal.close()
					}

				}
			},
			continuePk() {
				if (this.nextStoryId) {
					this.$emit("getGameResult", this.nextStoryId)
					if (this.$refs.resultModal) {
						this.$refs.resultModal.close()
					}

				}
			},
			reStartPK() {
				this.$emit('restartStory', (flag) => {
					if (flag) {
						this.$refs.resultModal.close()
					}

				})
			},
			pauseVideo() {
				this.$emit('pauseVideo')
			},
			initAudio() {
				this.audioContext = uni.createInnerAudioContext()
			},
			playVoice(src) {
				if (src) {
					this.audioContext.stop()
					this.audioContext.src = src
					this.audioContext.play()
				}

			},
			handleItemTouchcancel(index, item) {

				if (!this.isLongPress) {
					this.handleCardClick(index, item)
				}

				this.isLongPress = false
				this.showAttr = false
				this.activeLongPressIndex = -1



			},
			handleItemTouchend(index, item) {
				if (!this.isLongPress) {
					this.handleCardClick(index, item)
				}
				this.isLongPress = false
				this.showAttr = false
				this.activeLongPressIndex = -1
			},
			handlItemTouchstart(index, item) {
				this.playVoice(this.cardChooseVoice)
				console.log("开始触摸");
			},
			handleItemLongpress(index, item) {
				this.showAttr = true
				this.isLongPress = true
				this.activeLongPressIndex = index
			},
			handleChangeSelfClick() {
				this.isSelf = !this.isSelf
			},
			handleTimeUpdate(e) {
				return
				let currentTime = e.detail.currentTime
				// 判断数据是否已经获取完毕
				if (this.nowRoundData.endTime) {
					this.isStart = true
					let nowRoundData = this.nowRoundData


					// 我方轮次
					if (currentTime >= this.nowRoundData.myBeginTime && currentTime < this.nowRoundData.myEndTime && !this
						.isMyFlag) {
						console.log('标记我方');
						this.isMyRound = true
						this.showTip = false
						this.isMyFlag = true

						// 重置当前能量
						this.nowPower = 3
					}

					// 对方轮次
					if (currentTime >= this.nowRoundData.enemyBeginTime && currentTime < this.nowRoundData.enemyEndTime &&
						!this.isEnemyFlag) {
						console.log("标记敌方");
						this.isMyRound = false
						this.isEnemyFlag = true
						// 能量置空
						this.nowPower = 0
						this.activeCardIndex = -1
					}


					// 我方轮次结束
					if (currentTime >= this.nowRoundData.myEndTime && !this.isMyScale) {
						console.log('我方轮次结束');
						if (this.myPersonWaitList.length) {
							// 更新我方当前数据以及等待列表数据
							this.nowMyGirlData = this.myPersonWaitList[0]
							this.myPersonWaitList.splice(0, 1)
							this.isMyScale = true
						} else {
							this.nowMyGirlData.playEnd = true
							this.isMyScale = true
						}

					}

					// 敌方轮次结束
					if (currentTime >= this.nowRoundData.enemyEndTime && !this
						.isEnemyScale) {
						console.log("敌方轮次结束");
						if (this.enemyPersonWaitList.length) {
							console.log('敌方轮次结束，进入上边');
							// 更新我方当前数据以及等待列表数据
							this.nowEnemyGirlData = this.enemyPersonWaitList[0]
							this.enemyPersonWaitList.splice(0, 1)
							this.isEnemyScale = true
						} else {
							this.nowEnemyGirlData.playEnd = true
							this.isEnemyScale = true
							console.log('敌方轮次结束，进入这里', this.nowEnemyGirlData.playEnd);
						}


					}

					// 切换轮次数据
					if ((currentTime >= nowRoundData.endTime) && (this.activeRoundIndex < this.roundDataList.length - 1)) {
						this.activeRoundIndex += 1
						this.nowRoundData = this.roundDataList[this.activeRoundIndex]
						this.isMyFlag = false
						this.isEnemyFlag = false
						this.isMyScale = false
						this.isEnemyScale = false


						this.handleUpdateWaitRound()

						// console.log("轮次切换", this.activeRoundIndex);

					}
				}
			},
			handleGetData() {
				this.myPerSonList = [{
							id: 0,
							name: "白领制服·秘书",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/71ee11eebf0c4f6d8a1a94368cdce6ba.jpg",
							type: "person",
							start: 3
						},
						{
							id: 1,
							name: "制服诱惑·秘书",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e9ef7b1cf524c09acb62c202ea4f262.jpg",
							type: "person",
							start: 5
						},
						{
							id: 2,
							name: "清纯可爱·秘书",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68075b52d7764ff2b5cf3d8d04856188.jpg",
							type: "person",
							start: 4
						}
					],
					this.enemyPersonList = [{
							id: 5,
							name: "幸运女神·妙陈",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/afa5839633f64d4fa8c71162eef9cfb9.png",
							type: "person",
							start: 5
						},
						{
							id: 6,
							name: "泳装教练·妙陈",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d247b99171949ddab010bd8e7eda006.png",
							type: "person",
							start: 4
						},
						{
							id: 7,
							name: "兔兔警官·妙陈",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d82a4c86df524fdb82088d48754ea85e.png",
							type: "person",
							start: 3
						}
					]

				// 当前使用数据
				this.nowMyGirlData = this.myPerSonList[0]
				this.nowEnemyGirlData = this.enemyPersonList[0]

				// 取出等待列表
				this.myPersonWaitList = this.myPerSonList.splice(1)
				this.enemyPersonWaitList = this.enemyPersonList.splice(1)

				// 轮次安排数据
				this.roundDataList = [
					// {
					// 	roundName: "第1/3回合",
					// 	beginTime: 0,
					// 	endTime: 42,
					// 	myBeginTime: 0,
					// 	myEndTime: 21,
					// 	enemyBeginTime: 21,
					// 	enemyEndTime: 42,

					// },
					// {
					// 	roundName: "第2/3回合",
					// 	beginTime: 42,
					// 	endTime: 88,
					// 	myBeginTime: 42,
					// 	myEndTime: 67,
					// 	enemyBeginTime: 67,
					// 	enemyEndTime: 88,

					// },
					// {
					// 	roundName: "第3/3回合",
					// 	beginTime: 88,
					// 	endTime: 114,
					// 	myBeginTime: 88,
					// 	myEndTime: 104,
					// 	enemyBeginTime: 104,
					// 	enemyEndTime: 114,

					// },


					{
						roundName: "第1/3回合",
						beginTime: 0,
						endTime: 30,
						myBeginTime: 0,
						myEndTime: 15,
						enemyBeginTime: 15,
						enemyEndTime: 30,

					},
					{
						roundName: "第2/3回合",
						beginTime: 30,
						endTime: 70,
						myBeginTime: 30,
						myEndTime: 54,
						enemyBeginTime: 54,
						enemyEndTime: 70,

					},
					{
						roundName: "第3/3回合",
						beginTime: 70,
						endTime: 103,
						myBeginTime: 70,
						myEndTime: 87,
						enemyBeginTime: 87,
						enemyEndTime: 103,

					},
				]

				if (this.roundDataList.length) {
					this.nowRoundData = this.roundDataList[0]
				}

			},
			handleTimeChange(e) {
				// console.log("倒计时", this.timestamp - e);
				let nowSecond = this.timestamp - e

			},
			playCardGift(e) {
				this.$emit("playCardGift", {
					...e,
					playType: 'gift'
				})
			},
			flyNowIcon(e) {
				if (this.$refs.giftFloat) {
					this.$refs.giftFloat.handleStartFly(e)
				}
			},
			getProps() {
				if (!this.isInit) {
					let paramsJson = this.paramsJson
					this.waitStartTime = paramsJson.waitStartTime && paramsJson.waitStartTime.default ? paramsJson
						.waitStartTime.default : this
						.waitStartTime
					this.timestamp = paramsJson.timestamp && paramsJson.timestamp.default ? paramsJson.timestamp.default :
						this
						.timestamp
					this.top = paramsJson.top && paramsJson.top.default ? paramsJson.top.default : this.top
					this.baseClickPoint = paramsJson.baseClickPoint && paramsJson.baseClickPoint.default ? paramsJson
						.baseClickPoint.default : this
						.baseClickPoint

					// this.svgStyle = paramsJson.svgStyle && paramsJson.svgStyle.default ? paramsJson.svgStyle.default : this
					// 	.svgStyle
					this.pinlunHeigh = paramsJson.pinlunHeigh && paramsJson.pinlunHeigh.default ? paramsJson.pinlunHeigh
						.default : this.pinlunHeigh
					this.pinlunBottom = paramsJson.pinlunBottom && paramsJson.pinlunBottom.default ? paramsJson
						.pinlunBottom
						.default : this
						.pinlunBottom
					this.skillBottom = paramsJson.skillBottom && paramsJson.skillBottom.default ? paramsJson.skillBottom
						.default : this
						.skillBottom
					this.giftFlyTop = paramsJson.giftFlyTop && paramsJson.giftFlyTop.default ? paramsJson.giftFlyTop
						.default : this
						.giftFlyTop

					this.$emit("changeSvgaStyle", this.svgStyle)
					// this.handleStartPkProgram()
				} else {
					this.isInit = true
				}


			},
			// 开始正式pk前先执行
			handleStartPkProgram() {
				setTimeout(() => {
					// this.isStart = true
					this.startPk()
				}, this.waitStartTime * 1000)
			},
			handleGiftClick() {
				// console.log("礼物点击");
				this.$emit("openGiftPop")

			},
			handleCountDownEnd() {
				console.log("倒计时结束");
				this.$emit("clearSvga")
				this.isEnd = true
				clearInterval(this.autoAddIntervalId)
				if (!this.$refs.resultModal) {
					return
				}
				if (this.leftPoint < this.rightPoint) {
					console.log("pk失败");
					this.$refs.resultModal.open("fail")
				} else {
					console.log("pk胜利");
					this.$refs.resultModal.open("success")
				}


			},
			getRandomValue(type) {
				const random = Math.random() * 100; // 生成0到100之间的随机数
				if (type == 'that') {
					if (random < 50) {
						return 2;
					} else if (random < 70) {
						return 5;
					} else if (random < 85) {
						return 10;
					} else if (random < 90) {
						return 15;
					} else if (random < 94) {
						return 20;
					} else if (random < 97) {
						return 25;
					} else if (random < 99) {
						return 30;
					} else {
						return 35;
					}
				} else {
					if (random < 50) {
						return 1;
					} else if (random < 70) {
						return 3;
					} else if (random < 85) {
						return 8;
					} else if (random < 90) {
						return 12;
					} else if (random < 94) {
						return 15;
					} else if (random < 97) {
						return 20;
					} else if (random < 99) {
						return 25;
					} else {
						return 28;
					}
				}

			},
			giftAddScore(num) {
				if (!this.isEnd) {
					this.leftPoint += Number(num) * 10
				}

			},
			handlePkClick(e) {
				console.log("被点击");
				// if (!this.isEnd && this.isStart && this.$refs.pkClickEffect) {
				// 	this.leftPoint += this.baseClickPoint
				// 	this.$refs.pkClickEffect.handleTouchStart(e)
				// }
				this.leftPoint += this.baseClickPoint
				this.$refs.pkClickEffect.handleTouchStart(e)
			},
			handleThatGirlAutoAdd() {
				let num = this.getRandomValue('that')
				this.rightPoint += num
			},
			handleThisGirlAutoAdd() {
				let num = this.getRandomValue('this')
				this.leftPoint += num

			},
			startPk() {
				this.autoAddIntervalId = setInterval(() => {
					this.handleThatGirlAutoAdd()
				}, 500)
			},
			pkOver() {
				clearInterval(this.autoAddIntervalId)
				this.leftPoint = 0
				this.rightPoint = 0
			}

		}
	}
</script>

<style lang="scss" scoped>
	.test-left {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 20rpx;
		top: 100rpx;
		background-image: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/07051e24ddde4204970b229cf7e3204a.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.m-pk {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		// background: url("https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f1ca160a97954f31b8e343be995c6237.jpg") no-repeat;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;

		.attr-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 500rpx;
			height: 500rpx;
			border-radius: 5rpx;
			box-sizing: border-box;
			// border: 2rpx solid #fff;
			box-shadow: 0rpx 0rpx 4rpx #fff;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			z-index: 999999999;
			background-color: rgba(0, 0, 0, .5);


			.top-attr {
				width: 100%;
				height: 180rpx;
				// background-color: rgba(0, 0, 0, .4);
				box-sizing: border-box;
				padding: 20rpx;
				padding-bottom: 0rpx;


				.attr-content {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					border-bottom: 1rpx solid rgba(255, 255, 255, .2);
					box-sizing: border-box;
					padding-bottom: 20rpx;
				}

				.attr-icon {
					height: 100%;
					width: 140rpx;
					// background-color: #fff;
					margin-right: 20rpx;
					box-sizing: border-box;
					// border: 2rpx solid #fff;
					box-shadow: 0rpx 0rpx 4rpx #fff;
					border-radius: 5rpx;
					overflow: hidden;

					.icon-img {
						width: 100%;
						height: 100%;
					}
				}

				.attr-intro {
					flex: 1;
					height: 100%;


					.title-row {
						width: 100%;
						font-size: 20rpx;
						color: #fff;
						line-height: 28rpx;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						margin-bottom: 15rpx;
					}

					.attr-row {
						width: 100%;
						font-size: 20rpx;
						color: rgba(255, 255, 255, .8);
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .1);
						line-height: 24rpx;
						margin-bottom: 10rpx;

						.title {
							margin-right: 20rpx;
						}

						.number {
							color: #e0b86b;
						}

						.type {
							color: #fff;
						}

						&:last-child {
							margin-bottom: 0rpx;
						}
					}
				}
			}

			.bottom-intro {
				width: 100%;
				flex: 1;

				// background-color: rgba(0, 0, 0, .5);
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 20rpx;
				line-height: 30rpx;
				color: #fff;


				.intor-box {
					width: 100%;
					border-bottom: 1rpx solid rgba(255, 255, 255, .2);
					padding-bottom: 10rpx;
				}

				.level-box {
					width: 100%;
					margin-top: 10rpx;
					color: #7ce0ac;
				}
			}
		}


		.gift-icon {
			position: absolute;
			bottom: 200rpx;
			right: 50rpx;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;

			.gift-icon-img {
				width: 80rpx;
				height: 80rpx;

			}
		}

		.pkVideo {
			position: absolute;
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			z-index: 9;
		}

		.top-user-info {
			position: absolute;
			width: 100vw;
			// height: 100rpx;
			// background-color: pink;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;

			.pk-center {
				width: 85%;
				height: 100%;
				// background-color: #fff;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				// background-image: linear-gradient(to right, rgba(10, 7, 27, 0) 0%, rgba(39, 171, 209, .3) 50%, rgba(249, 43, 142, .3) 50%, rgba(10, 7, 27, 0) 100%);
				// background-color: pink;

				// background-color: red;

				.left-myGirl,
				.right-thatGirl {
					width: 90rpx;
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					// background-color: pink;


					.top-avatar {
						position: relative;
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						background-color: transparent;
						overflow: hidden;
						border: 1rpx solid transparent;
						margin-bottom: 5rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.avatar-content {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						.avatar-img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

						.masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: rgba(0, 0, 0, .5);
							font-size: 14rpx;
							color: #fff;
							z-index: 99999;
						}
					}



				}

				.left-myGirl {
					// margin-right: 15rpx;

					.bottom-name {
						font-size: 20rpx;
						font-weight: 700;
						width: 98rpx;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						white-space: nowrap; //不换行
						overflow: hidden; //超出部分隐藏
						text-overflow: ellipsis; //文本溢出显示省略号
						color: #fff;
						text-align: center;
						// display: flex;
						// justify-content: center;
						// align-items: center;
						height: 30rpx;
						line-height: 30rpx;
					}

					.top-avatar {
						border-color: #47ecf0;
					}


				}

				.active-left-girl {
					.top-avatar {
						box-shadow: 0rpx 0rpx 30rpx #27abd1;

						.avatar-img {
							animation: bling 1s linear infinite;
						}
					}
				}

				.right-thatGirl {
					// margin-left: 15rpx;

					.bottom-name {
						font-size: 20rpx;
						font-weight: 700;
						width: 98rpx;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						white-space: nowrap; //不换行
						overflow: hidden; //超出部分隐藏
						text-overflow: ellipsis; //文本溢出显示省略号
						color: #fff;
						text-align: center;
						height: 30rpx;
						line-height: 30rpx;
					}

					.top-avatar {
						border-color: rgba(254, 75, 160, .8);
					}

				}

				.active-right-girl {
					.top-avatar {
						box-shadow: 0rpx 0rpx 30rpx #fe4ba0;

						.avatar-img {
							animation: bling 1s linear infinite;
						}
					}
				}

				@keyframes bling {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.1);
					}

					100% {
						transform: scale(1);
					}
				}


				.center-blood {
					position: relative;
					flex: 1;
					// background-color: pink;
					height: 100%;

					.top-tip {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 10rpx;
						margin-top: 10rpx;
						font-size: 24rpx;
						font-weight: 700;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						color: #fff;
						// height: 28rpx;
						line-height: 24rpx;
						// background-color: pink;

					}

					.blood-content {
						width: 100%;
						height: 25rpx;
						border-radius: 20px;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						overflow: hidden;
						// margin-top: 18rpx;

					}


					.blood-left {
						position: relative;
						height: 25rpx;
						width: 50%;
						background: linear-gradient(to right, #27abd1, #47ecf0);
						background-color: transparent;
						text-align: left;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						color: #fff;
						font-size: 20rpx;
						line-height: 25rpx;
						box-sizing: border-box;
						padding-left: 12rpx;
						position: relative;

						.forward {
							position: absolute;
							top: 0rpx;
							right: -10rpx;
							width: 30rpx;
							height: 100%;
							border-radius: 0rpx 20rpx 20rpx 0rpx;
							// background-color: pink;
							background-color: #47ecf0;
							opacity: 0;



							.forwar-content {
								width: 100%;
								height: 100%;
								border-radius: 0rpx 20rpx 20rpx 0rpx;
								background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, #fff 100%);

							}
						}







					}

					.active-left {
						.forward {
							opacity: 1;
							z-index: 99999;
						}

					}

					.blood-right {
						position: relative;
						height: 25rpx;
						flex: 1;
						background: linear-gradient(to right, #fe4ba0, #f92b8e);
						text-align: right;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #fff;
						font-size: 20rpx;
						line-height: 30rpx;
						box-sizing: border-box;
						padding-right: 12rpx;

						.forward {
							position: absolute;
							top: 0rpx;
							left: -10rpx;
							width: 40rpx;
							height: 100%;
							border-radius: 20rpx 0rpx 0rpx 20rpx;
							// background-color: pink;
							background-color: #fe4ba0;
							opacity: 0;



							.forwar-content {
								width: 100%;
								height: 100%;
								border-radius: 20rpx 0rpx 0rpx 20rpx;
								background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, #fff 100%);
							}
						}

					}

					.active-right {
						.forward {
							opacity: 1;
							z-index: 99999;
						}
					}

				}

			}
		}

		.card-control-box {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			// background-color: #fff;
			// height: 500rpx;
			width: 100%;
			z-index: 99;
			margin-bottom: 20rpx;

			.top-control {
				position: relative;
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 20rpx;

				.left-total-number {
					// width: 140rpx;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex: 1;


					.power-box {
						position: relative;
						width: 100%;
						height: 55rpx;
						border-radius: 0rpx 40rpx 40rpx 0rpx;
						font-size: 20rpx;
						color: #fff;
						line-height: 55rpx;


						.power-content {
							position: absolute;
							left: -100%;
							top: 0rpx;
							height: 100%;
							border-radius: 0rpx 40rpx 40rpx 0rpx;
							background-color: rgba(0, 0, 0, .3);


							padding: 0rpx 20rpx;
							padding-left: 10rpx;
							font-weight: 700;
							box-shadow: 0rpx 0rpx 4rpx #fff;
							text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);


							transition: all 0.5s;

							.number {}

							.power-icon {
								width: 40rpx;
								height: 40rpx;

							}
						}

						.left-tip {
							height: 100%;
						}

						.now-power {
							left: 0%;

						}

						.isMy-power {

							// box-shadow: 0rpx 0rpx 10rpx #27abd1;
							// background-color: rgba(70, 233, 239, .3);
						}

						.isEnemy-power {
							// box-shadow: 0rpx 0rpx 10rpx #fe4ba0;
							// background-color: rgba(254, 75, 160, .3);
						}


					}





				}

				.right-control-box {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.btn-self,
					.btn-next {
						width: 55rpx;
						height: 55rpx;
						margin-right: 20rpx;
						background-color: rgba(0, 0, 0, .3);
						border-radius: 50%;
						box-shadow: 0rpx 0rpx 4rpx #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						line-height: 55rpx;
						text-align: center;
						color: #fff;
						font-weight: 700;



					}

					.btn-next {
						overflow: hidden;

						.next-icon {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.play-tip {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					pointer-events: none;
					font-size: 20rpx;
					line-height: 55rpx;
					padding: 0rpx 8rpx;
					background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3)20%, rgba(0, 0, 0, .3)80%, rgba(0, 0, 0, 0)100%);
					letter-spacing: 5rpx;
					color: #fff;
					z-index: 10;
					height: 55rpx;
					width: 400rpx;
				}

			}

			.bottom-card-list {
				position: relative;
				width: 100%;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 999999999999999;

				.tip-info {
					position: absolute;
					left: 0rpx;
					bottom: 60rpx;
					width: 100%;
					height: 40rpx;
					z-index: 10;
					display: flex;
					justify-content: center;
					align-items: center;
					opacity: 0;
					pointer-events: none;


					.center-content {
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						line-height: 40rpx;
						padding: 0rpx 90rpx;
						background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6)20%, rgba(0, 0, 0, .6)80%, rgba(0, 0, 0, 0)100%);
						letter-spacing: 5rpx;
						color: #fff;
						pointer-events: none;

					}

				}

				.tip-show {
					animation: showTipAni 0.2s ease-in-out forwards;
				}

				@keyframes showTipAni {
					0% {
						opacity: 0.5;
					}

					50% {
						opacity: 0.8;
					}

					100% {
						opacity: 1;
					}
				}



				.card-item {
					position: relative;
					width: 113rpx;
					height: 180rpx;
					border-radius: 8rpx;
					margin-right: 10rpx;
					z-index: 9;
					// box-shadow: 0rpx 0rpx 8rpx #fff;
					// overflow: hidden;



					.rarity-level {
						position: absolute;
						left: 5rpx;
						top: 5rpx;
						width: 60rpx;
						height: 30rpx;
						z-index: 10;

					}


					.item-content {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 113rpx;
						height: 180rpx;
						border-radius: 8rpx;
						background-color: #fff;
						box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .5);
						overflow: hidden;
						transition: all 0.2s;

						.disabled-masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							border-radius: 0rpx;
							background-color: rgba(0, 0, 0, .6);
							z-index: 99;

						}


						.card-consume {
							position: absolute;
							right: 5rpx;
							top: 5rpx;
							font-size: 24rpx;
							line-height: 25rpx;
							color: #fff;
							text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .8);
							z-index: 10;

							.card-consume-icon {
								width: 20rpx;
								height: 20rpx;
							}

						}







						// &::after {
						// 	position: absolute;
						// 	left: 0rpx;
						// 	bottom: 0rpx;
						// 	content: "";
						// 	width: 100%;
						// 	height: 40rpx;
						// 	z-index: 2;
						// }


						// &::before {
						// 	content: "";
						// 	position: absolute;
						// 	left: 0rpx;
						// 	top: 0rpx;
						// 	width: 100%;
						// 	height: 100%;
						// 	border-radius: 8rpx;
						// 	box-shadow: inset 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
						// 	z-index: 3;
						// 	box-sizing: border-box;
						// }



						.masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, .6);
							z-index: 99;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 8rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.disabled-img {
								width: 60rpx;
								height: 60rpx;
								opacity: 0.6;

							}

							.waitRound {
								width: 100%;
								font-size: 40rpx;
								font-weight: 700;
								color: #fff;
								line-height: 40rpx;
								text-align: center;
							}
						}

						.card-img-box {
							width: 100%;
							height: 100%;
							background-color: #fff;
							border-radius: 8rpx;
							overflow: hidden;
						}

						.item-image-skill {
							position: relative;
							width: 100%;
							height: 100%;
							z-index: 1;
							border-radius: 8rpx;

						}

						.item-image-prop {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							z-index: 1;
							width: 113rpx;
							height: 113rpx;
						}

						.item-image-breath {
							// animation: imgBreath 1s linear infinite;
						}

						@keyframes imgBreath {
							0% {
								transform: scale(1);
							}

							50% {
								transform: scale(1.05);
							}

							100% {
								transform: scale(1);
							}


						}


					}

					.item-content-loongpress {
						transform: scale(0.95);
					}

					.item-content-play {
						animation: playCardAni 1s linear;
					}

					@keyframes playCardAni {
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(1.1);
						}

						90% {
							transform: scale(1.1);
						}

						100% {
							transform: scale(1);
						}
					}

					.power-enough {
						position: absolute;
						left: 0rpx;
						top: -20rpx;
						box-shadow: 0rpx 0rpx 12rpx #fff;

					}

					&:last-child {
						margin-right: 0rpx;
					}

					.top-power-num {
						position: absolute;
						left: 0rpx;
						top: 5rpx;
						border-radius: 0rpx 8rpx 8rpx 0rpx;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						font-size: 14rpx;
						line-height: 18rpx;
						color: #fff;
						z-index: 10;
						padding: 0rpx 10rpx;
					}



					.bttton-info-person {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 30rpx;
						z-index: 10;

						.start-box {
							width: 80rpx;
							height: 100%;

							.start-item {
								width: 13rpx;
								height: 13rpx;

								.start-img {

									transform: rotate(25deg);
								}
							}
						}

						.level-box {
							flex: 1;
							height: 100%;
							box-sizing: border-box;
							padding-right: 5rpx;
							text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

							.head-text {
								font-size: 12rpx;
								color: #fff;
								line-height: 12rpx;
							}

							.level-num {
								// color: #f1cf36; 
								color: #fff;
								font-size: 12rpx;
								line-height: 12rpx;
							}

						}

						.skill-card-name {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 14rpx;
							// text-shadow: rgba(0, 0, 0, .3);
							color: #fff;

						}
					}

				}


			}

		}




	}

	.bottom-control-box {
		position: absolute;
		left: 0rpx;
		bottom: 15rpx;
		width: 100vw;
		height: 80rpx;
		z-index: 999;
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.input-box {
			flex: 1;
			height: 65rpx;
			border-radius: 33rpx;
			background-color: rgba(0, 0, 0, .3);
			margin-right: 20rpx;

			display: flex;
			justify-content: flex-start;
			align-items: center;

			overflow: hidden;
			box-sizing: border-box;
			padding: 10rpx 20rpx;

			.input-control {
				flex: 1;
				height: 100%;
				background-color: transparent;
				font-size: 24rpx;
				color: rgba(255, 255, 255, .8);
				line-height: 24rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
		}

		.button-list {
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.btn-item {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				background-color: rgba(0, 0, 0, .3);
				padding: 12rpx;

				.item-img {
					width: 90%;
					height: 90%;
					border-radius: 50%;
				}

				&:last-child {
					margin-right: 0rpx;
				}
			}

			.btn-item-more {
				padding: 16rpx;
			}

			.clear-item {
				.item-img {
					width: 60%;
					height: 60%;
					border-radius: 0rpx;
				}
			}

		}

		.default-gift,
		.gift-box {
			width: 65rpx;
			height: 65rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			background-color: rgba(0, 0, 0, .3);
			display: flex;
			justify-content: center;
			align-items: center;

			.icon-img {
				width: 90%;
				height: 90%;
				border-radius: 50%;
			}
		}
	}
</style>